<template>
  <!-- <div class="none" v-if="nsCollects.length < 1">还没有收藏内容</div> -->
  <div class="userFavorites">
    <div class="top">
      <div class="left">
        <div class="myCreated">我创建的</div>
      </div>
      <div class="right" @click.stop="show = true">新建收藏夹</div>
    </div>
    <div v-if="overHeader" class="fixedTop">
      <div class="left">
        <div class="myCreated">我创建的</div>
      </div>
      <div class="right">新建收藏夹</div>
    </div>
    <div class="index" v-if="nsCollects">
      <UserFavoriteItem
        v-for="(nsCollect, index) in nsCollects"
        :key="index"
        :nsCollect="nsCollect"
        :index="index"
        @doMore="doMore"
      />
    </div>
    <van-action-sheet
      v-model="show"
      :title="isModifying ? '修改收藏夹' : '新建收藏夹'"
      class="sheet"
      :closeable="false"
      @close="(addCollectName = ''), (isModifying = false)"
    >
      <div class="addOk" @click.stop="addCollectOk">完成</div>
      <div class="close" @click.stop="show = false">
        <van-icon name="cross" size="22" color="#000" />
      </div>
      <van-checkbox-group>
        <van-cell-group>
          <van-cell>
            <input
              class="input"
              type="text"
              placeholder="请输入收藏夹的名称，最多20字"
              v-model="addCollectName"
            />
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-action-sheet>
    <van-action-sheet
      v-model="show1"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import UserFavoriteItem from "@/components/UserFavoriteItem.vue";

export default {
  name: "UserFavorites",
  props: ["overHeader"],
  components: {
    UserFavoriteItem,
  },
  data() {
    return {
      nsCollects: null,
      show: false,
      addCollectName: "",
      // result: [],
      show1: false,
      isModifying: false,
      actions: [{ name: "编辑" }, { name: "删除" }],
      i: -1,
    };
  },
  mounted() {
    this.nsCollects = JSON.parse(
      localStorage.getItem("nsCollects") || `[{"title":"默认收藏夹","list":[]}]`
    );
  },
  methods: {
    addCollectOk() {
      if (this.addCollectName && this.addCollectName != "默认收藏夹") {
        if (!this.isModifying) {
          this.nsCollects = [
            ...this.nsCollects,
            { title: this.addCollectName, list: [] },
          ];
          this.$toast("创建成功");
        } else {
          this.nsCollects[this.i].title = this.addCollectName;
          this.$toast("修改成功");
        }
        localStorage.setItem("nsCollects", JSON.stringify(this.nsCollects));
        this.addCollectName = "";
        this.show = false;
      } else {
        this.$toast("请输入收藏夹名称");
      }
    },
    onSelect(item) {
      // this.$toast(item.name);
      if (item.name == "编辑") {
        this.addCollectName = this.nsCollects[this.i].title;
        this.isModifying = true;
        this.show = true;
      } else {
        this.$dialog
          .confirm({
            message: "删除后无法恢复，确定删除吗？",
          })
          .then(() => {
            // on confirm
            this.nsCollects.splice(this.i, 1);
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    onCancel() {
      this.$toast("取消");
    },
    doMore({ i }) {
      // console.log(i);
      this.i = i;
      this.show1 = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.userFavorites {
  // padding: 50px 0 0 0;
  position: relative;
  // height: 1000px;
  background-color: #f2f2f2;
  min-height: 242px;

  .fixedTop {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    top: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 1px solid #f2f2f2;
    background-color: white;
    z-index: 10;

    .left {
      margin-left: 15px;
      display: flex;

      .myCreated {
        font-size: 13px;
        color: red;
        font-weight: bold;
      }
    }

    .right {
      margin-right: 15px;
      height: 26px;
      line-height: 26px;
      border-radius: 13px;
      padding: 0 15px;
      border: 1px solid #f2f2f2;
      font-size: 13px;
      font-weight: bold;
    }
  }

  .top {
    width: 100%;
    height: 50px;
    // position: absolute;
    // left: 0;
    // top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 1px solid #f2f2f2;
    background-color: white;

    .left {
      margin-left: 15px;
      display: flex;

      .myCreated {
        font-size: 13px;
        color: red;
        font-weight: bold;
      }
    }

    .right {
      margin-right: 15px;
      height: 26px;
      line-height: 26px;
      border-radius: 13px;
      padding: 0 15px;
      border: 1px solid #f2f2f2;
      font-size: 13px;
      font-weight: bold;
    }
  }

  .sheet {
    .addOk {
      position: absolute;
      left: 10px;
      top: 8px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      border: 1px solid #f2f2f2;
      padding: 0 10px;
    }

    .input {
      background: none;
      outline: none;
      // border: 1px solid #ccc;
      border: none;
      padding: 0;
      font-size: 14px;
      color: #999;
      width: 215px;
      flex-shrink: 0;
      background-color: #f2f2f2;
      width: 333px;
      padding: 5px 10px;
      border-radius: 4px;
    }

    .input:focus {
      border: none;
    }

    .close {
      position: absolute;
      right: 15px;
      top: 13px;
    }
  }
}

// .none {
//   font-size: 16px;
//   color: #999;
//   margin-top: 50px;
//   text-align: center;
// }
</style>
